<!--
 * @Author: 晟松
 * @Date: 2021-12-05 16:47:48
 * @LastEditors: 晟松
 * @LastEditTime: 2022-02-24 22:31:21
 * @FilePath: \volunteer-vue3-admin\src\views\communityPages\ResidentVol.vue
 * @Description: 居民的志愿服务
-->

<template>
    <div>
        <div class="head">
            <el-row align="middle" justify="start" :gutter="20" class="row">
                <el-col :span="7" class="title">用户名称</el-col>
                <el-col :span="16">
                    <el-input v-model="nameInput" placeholder="请输入用户名称" clearable />
                </el-col>
            </el-row>
            <el-row align="middle" justify="start" :gutter="20" class="row">
                <el-col :span="7" class="title">手机号码</el-col>
                <el-col :span="16">
                    <el-input v-model="phoneInput" placeholder="请输入学生手机号码" clearable />
                </el-col>
            </el-row>
            <el-row align="middle" justify="start" :gutter="20" class="row">
                <el-col :span="10" class="title">志愿服务状态</el-col>
                <el-col :span="14">
                    <el-select v-model="volSatate" class="m-2" placeholder="志愿服务状态" size="large" clearable>
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row align="middle" justify="center" :gutter="20" class="row">
                <el-col :span="20">
                    <el-button type="primary" size="small" @click="serach">搜索</el-button>
                    <el-button type="info" size="small" @click="reset">重置</el-button>
                </el-col>
            </el-row>

            <el-row :gutter="10" class="allBtn">
                <!-- <el-col :span="1.1">
                    <el-button type="primary" plain icon="plus" size="mini" @click="handleAdd">新增</el-button>
                </el-col>
                <el-col :span="1.1">
                    <el-button type="danger" plain icon="delete" size="mini" @click="deleteMutiple" :disabled="delDisable">删除</el-button>
                </el-col>
                <el-col :span="1.1">
                    <el-button type="warning" plain icon="upload" size="mini" @click="handleUpload">导入</el-button>
                </el-col>
                <el-col :span="1.1">
                    <el-button type="warning" plain icon="download" size="mini" @click="handleDownload">导出</el-button>
                </el-col>-->
            </el-row>
        </div>
        <div class="show">
            <el-table :data="data.showList" style="width: 100%" stripe @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column label="id">
                    <template #default="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column label="发起者">
                    <template #default="scope">{{ scope.row.initiatorUser.userName }}</template>
                </el-table-column>
                <el-table-column label="领取者">
                    <template #default="scope">{{ scope.row.recipientUser && scope.row.recipientUser.userName }}</template>
                </el-table-column>
                <el-table-column property="title" label="标题" align="center" />
                <el-table-column property="event" label="事件" show-overflow-tooltip width="150" />
                <el-table-column property="time" label="时间" align="center" width="170" />

                <el-table-column property="duration" label="持续时间" align="center" width="50" />
                <el-table-column property="place" label="地点" show-overflow-tooltip width="200" align="center" />
                <el-table-column prop="state" label="状态" :formatter="stateTrans" align="center" />

                <el-table-column property="createdAt" label="创建时间" width="100" align="center" />
                <el-table-column property="timeIntegral" label="时间积分" align="center" />
                <el-table-column align="center" width="180">
                    <template #header>
                        <!-- <el-input v-model="search" size="small" placeholder="Type to search" /> -->
                        操作
                    </template>
                    <template #default="scope">
                        <!-- 审核一个志愿服务 -->
                        <el-button
                            type="text"
                            v-if="scope.row.state == enums.state['pendingReview'] || scope.row.state == 1"
                            size="small"
                            icon="select"
                            @click="handleReviewVol(scope.$index, scope.row)"
                        >审核</el-button>
                        <el-button
                            v-else
                            type="text"
                            size="small"
                            icon="edit"
                            @click="handleVolDetail(scope.$index, scope.row)"
                        >详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="demo-pagination-block" :style="{ float: 'right', marginTop: '10px' }">
                <el-pagination
                    :page-size="20"
                    :small="false"
                    :disabled="false"
                    :background="true"
                    layout="total, prev, pager, next"
                    :total="data.showList.length"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                ></el-pagination>
            </div>

            <!-- 查看志愿服务的一些信息 -->
            <el-dialog v-model="volDetailVisible" :title="volDetailTitle" width="80%" top="5.5vh">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card :body-style="{ padding: '10px' }" header="发起者">
                            <user-detail :user="volDetail.initiatorUser"></user-detail>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-form :model="volDetail" :label-position="dialogLablePosition">
                            <el-form-item label="标题" :label-width="formLabelWidth">
                                <el-input v-model="volDetail.title" autocomplete="off" clearable disabled></el-input>
                            </el-form-item>
                            <el-form-item label="图片" :label-width="formLabelWidth">
                                <el-image style :src="volDetail.img" fit="contain"></el-image>
                            </el-form-item>
                            <el-form-item label="事件" :label-width="formLabelWidth">
                                <el-input v-model="volDetail.event" autocomplete="off" clearable disabled type="textarea"></el-input>
                            </el-form-item>
                            <el-form-item label="时间" :label-width="formLabelWidth">
                                <el-input v-model="volDetail.time" autocomplete="off" clearable disabled></el-input>
                            </el-form-item>
                            <el-form-item label="地点" :label-width="formLabelWidth">
                                <el-input v-model="volDetail.place" autocomplete="off" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="时间积分" :label-width="formLabelWidth">
                                <el-input v-model="volDetail.timeIntegral" autocomplete="off" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="持续时间" :label-width="formLabelWidth">
                                <el-input v-model="volDetail.duration" autocomplete="off" clearable disabled></el-input>
                            </el-form-item>
                            <el-form-item label="特殊要求" :label-width="formLabelWidth">
                                <el-input v-model="volDetail.demand" autocomplete="off" clearable disabled type="textarea"></el-input>
                            </el-form-item>
                            <el-form-item label="审核意见" :label-width="formLabelWidth">
                                <el-input v-model="volDetail.reviewOpinion" autocomplete="off" clearable type="textarea" disabled></el-input>
                            </el-form-item>

                            <el-form-item label="反馈" :label-width="formLabelWidth">
                                <el-input v-model="volDetail.feedback" autocomplete="off" clearable disabled></el-input>
                            </el-form-item>
                            <el-form-item label="评价" :label-width="formLabelWidth">
                                <el-input v-model="volDetail.evaluation" autocomplete="off" clearable disabled></el-input>
                            </el-form-item>
                            <el-form-item label="评价分数" :label-width="formLabelWidth">
                                <!-- 这个rate有问题 -->
                                <el-rate
                                    v-model="volDetail.evaluationScore"
                                    allow-half
                                    show-score
                                    disabled
                                    text-color="#ff9900"
                                    score-template="{value} 星"
                                    void-color="#909399"
                                    :colors="['#F7BA2A', '#F7BA2A', '#F7BA2A']"
                                ></el-rate>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="3">
                        <div style="height: 400px">
                            <el-steps direction="vertical" :active="handleStateStep(volDetail.state)">
                                <el-step v-for="(item) in enums.stateTransArr" :key="item" :title="item"></el-step>
                            </el-steps>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <el-card :body-style="{ padding: '10px' }" header="领取者">
                            <!-- 处理一下还没有领取者的情况 -->
                            <user-detail :user="volDetail.recipientUser" v-if="volDetail.recipientUser"></user-detail>
                            <p v-else></p>
                        </el-card>
                    </el-col>
                </el-row>
                <!-- <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="volDetailVisible = false">取消</el-button>
                        <el-button type="primary" @click="editUser">确认</el-button>
                    </span>
                </template>-->
            </el-dialog>

            <!-- 审核一个志愿服务 -->
            <el-dialog v-model="reviewVolVisible" :title="reviewVolTitle" width="80%" top="5.5vh">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card :body-style="{ padding: '10px' }" header="发起者">
                            <user-detail :user="reviewVolDetail.initiatorUser"></user-detail>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-form :model="reviewVolDetail" :label-position="dialogLablePosition">
                            <el-form-item label="标题" :label-width="formLabelWidth">
                                <el-input v-model="reviewVolDetail.title" autocomplete="off" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="图片" :label-width="formLabelWidth">
                                <el-image style :src="reviewVolDetail.img" fit="contain"></el-image>
                            </el-form-item>
                            <el-form-item label="事件" :label-width="formLabelWidth">
                                <el-input v-model="reviewVolDetail.event" autocomplete="off" clearable type="textarea"></el-input>
                            </el-form-item>
                            <el-form-item label="时间" :label-width="formLabelWidth">
                                <el-input v-model="reviewVolDetail.time" autocomplete="off" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="地点" :label-width="formLabelWidth">
                                <el-input v-model="reviewVolDetail.place" autocomplete="off" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="时间积分" :label-width="formLabelWidth">
                                <el-input v-model="reviewVolDetail.timeIntegral" autocomplete="off" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="持续时间" :label-width="formLabelWidth">
                                <el-input v-model="reviewVolDetail.duration" autocomplete="off" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="特殊要求" :label-width="formLabelWidth">
                                <el-input v-model="reviewVolDetail.demand" autocomplete="off" clearable type="textarea"></el-input>
                            </el-form-item>
                            <el-form-item label="审核意见" :label-width="formLabelWidth">
                                <el-input
                                    v-model="reviewVolDetail.reviewOpinion"
                                    autocomplete="off"
                                    clearable
                                    type="textarea"
                                    disabled
                                ></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="3">
                        <div style="height: 400px">
                            <el-steps direction="vertical" :active="handleStateStep(reviewVolDetail.state)">
                                <el-step v-for="(item) in enums.stateTransArr" :key="item" :title="item"></el-step>
                            </el-steps>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <el-card :body-style="{ padding: '10px' }" header="审核评价">
                            <el-input type="textarea" v-model="reviewText"></el-input>
                            <span :style="{ float: 'right', margin: '10px 0' }">
                                <!-- 进行审核 -->
                                <el-button @click="adminReviewVol(false)" size="small">打回</el-button>
                                <el-button type="primary" size="small" @click="adminReviewVol(true)">通过</el-button>
                            </span>
                        </el-card>
                    </el-col>
                </el-row>
                <!-- <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="volDetailVisible = false">取消</el-button>
                        <el-button type="primary" @click="editUser">确认</el-button>
                    </span>
                </template>-->
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { getAllResident } from "@/myApi/community";
import {
    getAllStudent,
    getAllCollegeStudent,
    getAllCollegeAdmin,
    searchAllCollegeStudent,
    searchAllStudent,
} from "@/myApi/school";
import { getCollegeAllStudentVol, getAllResidentVol, searchCollegeAllStudentVol, reviewVol } from "@/myApi/vol";
import { getAllSchool, getAllCommunity, create, deleteUser, update, updatePwd } from "../../myApi/user";
import { localFile } from '@/myApi/upload'
import { reactive, ref, computed, onBeforeMount, onMounted, watchEffect } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import enums from "@/utils/enums";
import { batchRegisterStudent } from "../../myApi/school";
import { ElMessage } from 'element-plus'
import UserDetail from '@/components/UserDetail.vue'
import { searchAllResidentVol } from "../../myApi/vol";


let mine = reactive({ student: { name: "蒋晟松" }, score: 4 });

const store = useStore();
const router = useRouter();
let identity = computed(() => store.getters.identity);
// console.log("identity: ", identity.value);
let userAdmin = computed(() => store.getters.user);
let schoolAdmin = computed(() => store.getters.schoolAdmin);

let nameInput = ref("");
let phoneInput = ref("");
let volSatate = ref(undefined);
let options = [
    {
        value: 'pendingReview',
        label: "等待审核",
    },
    {
        value: 'returned',
        label: "被退回",
    },
    {
        value: 'approved',
        label: "待领取",
    },
    {
        value: 'alreadyClaimed',
        label: "已被领取",
    },
    {
        value: 'pendingFeedback',
        label: "待反馈",
    },
    {
        value: 'toBeEvaluated',
        label: "待评价",
    },
    {
        value: 'completed',
        label: "已完成",
    },
    {
        value: 'cancelled',
        label: "已取消",
    },
    {
        value: 'expired',
        label: "已过期",
    },
];

// 在table中转换一下性别为中文
const genderTrans = (row, column, cellValue, index) => {
    if (cellValue == 'male') {
        return '男'
    } else if (cellValue == 'female') {
        return '女'
    } else {
        return '无'
    }
}
const genderTransNum = (genderNum) => {
    if (genderNum == 1) {
        return '男'
    } else if (genderNum == 4) {
        return '女'
    } else {
        return '未知'
    }
}
// 转换一下年级
const gradeTrans = (row, column, cellValue, index) => {
    let res = ''
    switch (cellValue) {
        case 1: {
            res = '大一'
            break
        }
        case 2: {
            res = '大二'
            break
        } case 3: {
            res = '大三'
            break
        } case 4: {
            res = '大四'
            break
        } case 5: {
            res = '其他'
            break
        }
    }
    return res
}

// 将志愿服务的state转为el-step所需的active的位置
const handleStateStep = (state) => {
    return enums.stateArr.indexOf(enums.state[state])
}

// 转换志愿服务状态
const stateTrans = (row, column, cellValue, index) => {
    return enums.stateTrans[cellValue]
}

// 存储所有数据的对象
let data = reactive({ allVolList: [], showList: [] });
let limitOffset = reactive({ limit: 10, offset: 0 });
onMounted(async () => {
    await init()
});
/**
 * @description: 初始化table所需的数据
 * @param {*}
 * @return {*}
 */
async function init() {
    data.allVolList = await getAllResidentVol({ id: userAdmin.value.id })
    console.log("data.allVolList: ", data.allVolList.data);
    data.showList = data.allVolList.data.pureAllVol
}

// 搜索按钮的处理
const serach = async () => {
    console.log(nameInput.value, phoneInput.value, volSatate.value);
    // 注意数据格式
    let params = {
        id: userAdmin.value.id,
        residentName: nameInput.value,
        residentPhone: phoneInput.value,
        volSatate: volSatate.value
    }
    let res = {}
    res = await searchAllResidentVol(params)
    data.showList = res.data.pureAllVol
    console.log('data.showList: ', data.showList);
}

const reset = () => {
    nameInput.value = ''
    phoneInput.value = ''
    volSatate.value = undefined
}

// 修改学生的可用状态
const switchAvailable = async (val, stu) => {
    console.log('val,stu: ', val, stu);
    let res = await update({ id: stu.id, identity: stu.identity, volSatate: val })
    console.log('res: ', res);
}

const multipleSelection = ref([])
/**
 * @description: 处理多行的多选
 * @param {*} val
 * @return {*}
 */
const handleSelectionChange = (val) => {
    console.log('handleSelectionChange val: ', val);
    multipleSelection.value = val
}


// 根据是否多选了进行判断是否可删除
let delDisable = computed(() => {
    if (multipleSelection.value.length > 0) return false
    else return true
})
const deleteMutiple = async () => {
    console.log('deleteMutiple: ', multipleSelection.value);
    for (let i = 0; i < multipleSelection.value.length; i++) {
        let { id, identity } = multipleSelection.value[i]

        let res = await deleteUser({ id, identity })
        console.log('res: ', res);
    }
    await init()
}




let volDetail = ref({})
let volDetailVisible = ref(false)
let volDetailTitle = ref('详情')
let formLabelWidth = '140px'
let dialogLablePosition = 'left'
let volDetailDisabled = ref(false)
const handleVolDetail = (index, stu) => {
    console.log('handleEdit stu: ', index, stu);
    volDetail.value = stu
    // 针对这个评价星数，可能为null，所以需要处理一下
    volDetail.value.evaluationScore -= 0
    volDetailVisible.value = true
}



let reviewVolDetail = ref({})
let reviewVolVisible = ref(false)
let reviewVolTitle = ref('审核')
let reviewVolDisabled = ref(false)
const handleReviewVol = (index, stu) => {
    console.log('handleReviewVol stu: ', index, stu);
    reviewVolDetail.value = stu
    reviewVolVisible.value = true
}
let reviewText = ref('')
const adminReviewVol = async (reviewStatu) => {
    console.log('reviewVol.value: ', reviewText.value);
    let params = {
        volId: reviewVolDetail.value.id,
        isReturned: !reviewStatu,// 表示是否退回
        reviewOpinion: reviewText.value
    }
    let res = await reviewVol(params)
    console.log('res: ', res);
    if (res.data.length > 0) {
        reviewVolVisible.value = false
        await init()
    }

}


// 分页所需的东西
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
}

</script >

<style lang="scss" scoped>
.head {
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;
    .allBtn {
        margin: 10px;
    }
    .row {
        margin: 0 10px;
        min-width: 20vw;
        .title {
            font-size: 0.9rem;
            font-weight: bold;
        }
    }
}
.show {
    .optionBtn {
    }
}
</style>
